<template>

  <mu-container>
    <mu-button large style="width: 100%;" class="form_button" @click="goAdd">
      <mu-icon right value="add"></mu-icon>
      新增邮寄地址
    </mu-button>
    <mu-divider></mu-divider>
    <mu-paper class="form_paper" :z-depth="1" v-for="(item,index) in addresslist" :key="index">
      <div class="blank" @click="selectAddress(item)"></div>
      <van-tag type="danger" v-if="item.isdefault === '1'">默认地址</van-tag>
      <div class="flex">
        <div style="font-size:18px;">
          <div style="height: 40px;line-height: 40px;">{{item.mailname}} {{item.mailmobile}}</div>
        </div>
        <div>
          <mu-button flat color="primary" @click="goEdit(item.rowguid)" style="padding:0 5px;">编辑</mu-button>
          <mu-button flat color="primary" @click="del(item)">删除</mu-button>
        </div>
      </div>
      <div>
        {{item.address}}
      </div>

    </mu-paper>
  </mu-container>

</template>

<script>
  export default {
    data() {
      return {
        addresslist: []
      }
    },
    methods: {
      selectAddress(item) {
        let _this = this;
        let rowguid = this.$route.query.rowguid;
        console.log(item.rowguid)
        this.$api.selandusemailaddress({
          guaranteeid: rowguid,
          mailaddressid: item.rowguid
        }).then(function (data) {
          _this.toPath({
            path: '/creatorder',
            query: {
              rowguid: rowguid
            }
          })
        })
      },
      goAdd() {
        let rowguid = this.$route.query.rowguid;
        this.$router.push({
          path: '/EditAddress',
          query: {
            rowguid: rowguid
          }
        })
      },
      goEdit(rowguid) {
        this.$router.push({
          path: '/EditAddress',
          query: {
            rowguid: rowguid
          }
        })
      },
      del(item) {
        let _this = this;
        this.$dialog.confirm({
          title: '提示',
          message: '确定删除？'
        }).then(() => {
          _this.$api.delmailaddress({
            rowguid: item.rowguid
          }).then(function (data, res) {
            _this.$toast.success('删除成功');
            _this.queryData();
          })
        }).catch(() => {
          // on cancel
        });
      },
      queryData() {
        let _this = this;
        this.$api.mailaddresslist().then(function (data) {
          _this.addresslist = data;
        })
      }

    },
    mounted() {
      this.queryData();
    }
  }
</script>

<style lang="less" scoped>
  #app {
    background: #ffffff
  }

  .container {
    height: 100%;
    padding: 15px;
    background: #fff;
  }

  .form_button {
    border: 2px dashed #bbbbbb
  }

  .form_paper {
    margin: 10px 0;
    padding: 10px;
    position: relative;
  }

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .mu-flat-button {
    min-width: 40px;
  }

  .blank {
    position: absolute;
    top: 0;
    width: 66%;
    height: 100px;
    z-index: 99999;
  }
  .mu-flat-button .mu-button-wrapper{padding: 0 5px;}
</style>